<template>
  <el-dialog v-model="dialogFormVisible">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span>请选择关联的商品</span>
        </div>
      </template>
      <template #default>
        <el-row :gutter="20">
          <el-col :span="8" v-for="product in products" :key="product.id">
            <el-card style="margin-bottom: 20px;" shadow="hover">
              <el-descriptions title="" :column="1" border>
                <el-descriptions-item label="ID">{{ product.id }}</el-descriptions-item>
                <el-descriptions-item :rowspan="2" :width="140" label="图片" align="center">
                  <el-image style="width: 100px; height: 100px" :src="product.url" />
                </el-descriptions-item>
                <el-descriptions-item label="名称">{{ product.name }}</el-descriptions-item>
                <el-descriptions-item label="商家">{{ product.merchantName }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

const dialogFormVisible = ref(false)  // 弹窗显示或隐藏

const toggleDialog = (newValue: boolean) => {
  dialogFormVisible.value = newValue;
};

// 暴露方法给父组件
defineExpose({
  toggleDialog
});

interface Product {
  id: number;
  name: string;
  url: string;
  merchantName: string;
}

const products: Product[] = [
  { id: 1, name: '商品A', url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', merchantName: '清风辅柳' },
  { id: 2, name: '商品B', url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', merchantName: '安之五金' },
  { id: 3, name: '商品C', url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', merchantName: '李姐水果店' },
];
</script>

<style scoped>

</style>